<template>
    <div class="box">
        <div class="query-box">
            <div class="line-center">
                <el-row>
                    <el-form ref="form" :model="activityRegForm" size="small" label-width="80px">
                        <el-col :span="4">
                            <el-form-item label="活动名称" style="width: 200px;">
                                <el-input clearable v-model="activityRegForm.activityName"
                                    placeholder="请输入活动名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="报名人" style="width: 240px;">
                                <el-input clearable v-model="activityRegForm.userName"
                                    placeholder="请输入报名人名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="审核状态" style="width: 220px;">
                                <el-select clearable v-model="activityRegForm.status" placeholder="请选择审核状态">
                                    <el-option label="未通过" value="0"></el-option>
                                    <el-option label="已通过" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-button type="primary" plain @click="querySubmit"
                                    icon="el-icon-search">搜索</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <el-button @click="HandleBatchDelete" type="danger" plain size="small"
                                icon="el-icon-delete">批量删除</el-button>
                        </el-col>
                        <el-col :span="8"></el-col>
                    </el-form>
                </el-row>
            </div>
        </div>

        <!-- 表格 -->
        <div class="table">
            <table-component @getEvaluateColumn="chanageEvaluateColumn" @columnIds="getColumnIds"
                :loading="tableLoading" @statusColumn="tableStatusColumn" :table-data="activityRegRespData"
                :column="activityRegColumn">
                <template v-slot:operate="{ row }">
                    <el-button @click="deleteActivityReg(row.id)" style="color: red;" type="text" size="small">
                        删除
                    </el-button>
                </template>
            </table-component>

            <pagination-component :page-query="activityRegForm" :page-total="totalReg" @handleSizeChange="sizeChange"
                @handleCurrentChange="currentChange"></pagination-component>
        </div>
        <!-- status弹框 -->
        <dialog-component title="活动报名状态" :dialog-visible="dialogFlag" :form="statusForm"
            :status-form-column="activityRegStatusColumn" @submitStatus="changeStatus"
            @handleClose="dialogClose"></dialog-component>

        <el-dialog title="表现评价" :visible.sync="dialogVisible" :before-close="handleClose" width="50%">
            <el-form ref="form" :model="statusForm" label-width="80">
                <el-form-item label="评价">
                    <el-select style="width: 300px;" v-model="statusForm.evaluate" placeholder="请选择志愿者表现评价"
                        clearable>
                        <el-option label="优秀" value="优秀"></el-option>
                        <el-option label="良好" value="良好"></el-option>
                        <el-option label="较差" value="较差"></el-option>
                        <el-option label="差" value="差"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="服务时长">
                    <el-input-number style="width: 270px;" v-model="statusForm.serviceDuration"
                        controls-position="right" :min="0" :max="8"></el-input-number>
                </el-form-item>
                <el-form-item label="信誉分操作">
                    <el-input-number style="width: 255px;" v-model="statusForm.creditScore" controls-position="right"
                        :min="0" :max="100"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" :loading="buttonLoading" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import TableComponent from '@/components/TableComponent.vue';
import PaginationComponent from '@/components/PaginationComponent.vue';
import DialogComponent from '@/components/DialogComponent.vue';
// import { updateActivityRegReq } from '@/api/common'
import { message, messageType } from '@/utils/message';
export default {
    components: {
        TableComponent,
        PaginationComponent,
        DialogComponent,
    },
    data() {
        return {
            activityRegForm: {
                activityName: '',
                userName: '',
                status: '',
                page: 1,
                pageSize: 4,
            },
            activityRegColumn: [
                { prop: 'userName', label: '报名人', width: '120' },
                { prop: 'phone', label: '联系电话', width: '120' },
                { prop: 'activityName', label: '活动名称', width: '140' },
                { prop: 'activityTypeName', label: '活动类型', width: '140' },
                { prop: 'opinion', label: '审核意见', width: '120' },
                { prop: 'serviceDuration', label: '服务时长', width: '110' },
                { prop: 'creditScore', label: '信誉分', width: '110' },
                { prop: 'evaluate', label: '用户评价', width: '110' },
                { prop: 'status', label: '审核状态', status: ['未通过', '已通过'], width: '120' },
                { prop: 'createTime', label: '创建时间', width: '200' },
                { prop: 'createTime', label: '创建时间', width: '200' },
                { prop: 'updateTime', label: '更新时间', width: '200' },
            ],

            dialogFlag: false,
            activityRegStatusColumn: [
                { label: '审核状态', prop: 'status', placeholder: '请选择审核状态', optionLabel: [{ label: '未通过', value: '0' }, { label: '已通过', value: '1' }], type: 'Select', width: '300px' },
                { label: '审核意见', prop: 'opinion', placeholder: '请输入审核意见', type: 'textarea', width: '300px'},
            ],
            tableLoading: true,
            statusForm: {
                id: 0,
                status: -1,
                opinion: '',
                serviceDuration:0,
                evaluate: '',
                creditScore:0,
            },
            ids: [],
            dialogVisible: false,
            buttonLoading:false,
        }
    },
    mounted() {
        this.pageQueryactivityRegListActions(this.activityRegForm);
    },
    computed: {
        ...mapState('activity', ['activityRegRespData', 'totalReg']),
    },
    methods: {
        ...mapActions('activity', ["pageQueryactivityRegListActions", "logicDeleteActivityRegByIdActions", "logicBatchDeleteActivityRegByIdsActions", "updateActivityRegReqActions"]),

        /**
         * 下拉事件
         */
        /* selectChange() { 
            console.log(this.activityRegForm);
            this.pageQueryactivityRegListActions(this.activityRegForm);
        }, */
        // 修改状态
        async changeStatus(form) {
            console.log(form);
            this.updateActivityRegReqActions(form);
            this.dialogFlag = false;
            setTimeout(() => {
                message(messageType().success, '操作成功');
                this.pageQueryactivityRegListActions(this.activityRegForm);
            }, 500);
        },
        async deleteActivityReg(id) {
            this.logicDeleteActivityRegByIdActions(id);
            setTimeout(() => {
                message(messageType().success, '操作成功');
                this.pageQueryactivityRegListActions(this.activityRegForm);
            }, 500);
        },
        HandleBatchDelete() {
            this.logicBatchDeleteActivityRegByIdsActions(this.ids)
            setTimeout(() => {
                message(messageType().success, '操作成功');
                this.pageQueryactivityRegListActions(this.activityRegForm);
            }, 500);
        },
        getColumnIds(ids) {
            this.ids = ids;
        },
        // 获取数据 显示弹框
        tableStatusColumn(row) {
            console.log('row-->', row);
            this.statusForm.id = row.id;
            this.statusForm.status = String(row.status)
            this.opinion = row.opinion;
            console.log(this.statusForm);
            this.dialogFlag = true;
        },
        chanageEvaluateColumn(row) {
            console.log('row-->',row);
            this.statusForm.id = row.id;
            this.statusForm.evaluate = row.evaluate;
            this.statusForm.serviceDuration = row.serviceDuration;
            this.statusForm.creditScore = row.creditScore;
            this.dialogVisible = true;
            console.log(row);
        },
        submit() {
            this.buttonLoading = true;
            this.updateActivityRegReqActions(this.statusForm)
                setTimeout(() => {
                    this.buttonLoading = false;
                    this.dialogVisible = false;
                    message(messageType().success, '操作成功')
                    this.pageQueryactivityRegListActions(this.activityRegForm);
                }, 500);
        },
        handleClose() {
            this.dialogVisible = false;
        },
        /**
         * 关闭弹框相关
         */
        dialogClose() {
            this.dialogFlag = false;
        },

        /**
         * 查询活动报名
         */
        querySubmit() {
            console.log(this.activityRegForm);
            this.pageQueryactivityRegListActions(this.activityRegForm);
        },
        /**
         *  分页查询
         */
        // 每页条数
        sizeChange(val) {
            this.activityRegForm.pageSize = val;
            this.pageQueryactivityRegListActions(this.activityRegForm);
        },
        // 当前页
        currentChange(val) {
            this.activityRegForm.page = val;
            this.pageQueryactivityRegListActions(this.activityRegForm);
        }
    },

}
</script>
<style lang="scss">
.box {
    width: 100%;

    .query-box {
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        height: 55px;
        margin: 10px;

        .line-center {
            padding: 10px 10px 10px 5px;
        }
    }

    .table {
        margin: 10px;
        max-height: calc(100vh - 55px - 55px - 30px - 30px);
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        .page-box {
            text-align: center;
        }

        // 表格图片
        .el-image__error,
        .el_image,
        img {
            width: 60px;
            height: 60px;
            // border-radius: 50%;
        }
    }
}
</style>